<template>
<div style="width: 100%">
  <a-card class="card" :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="vertical">
        <a-row :gutter="48">
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="准考证号">
              <a-input placeholder="请输入..." v-model="queryParam.ksbh"/>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="姓名">
              <a-input placeholder="请输入..." v-model="queryParam.ksxm"/>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="招生年度">
              <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.zsnj">
                <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}" >
            <a-form-item label="调剂院系">
              <a-select :disabled="selectMenu.yx.length === 1" :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.tjyxdm" @change="yxChange">
                <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{i.dwh+'-'+ i.dwmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="调剂专业">
              <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.tjzydm">
                <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zyh">{{i.zyh+'-'+ i.zymc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}" >
            <a-form-item label="调剂类型">
              <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.tjlxm" >
                 <a-select-option v-for="i in selectMenu.tjlxlb" :key="i.value" :value="i.value">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}" >
            <a-form-item label="调剂状态">
              <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="queryParam.tjzt" >
                 <a-select-option v-for="i in tjzts" :key="i.id" :value="i.id">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          </template>
          <a-col :sm="{span:20}" :xl="{span:10}">
             <span class="table-page-search-submitButtons" >
            <a-button type="primary" @click="loadData">查询</a-button>
            <a-button type="primary" @click="handleRxport">导出</a-button>
            <a-button type="primary" @click="handleBatchAudit">批量审核</a-button>
            <a-button @click="queryParam = {};loadData()" style="margin:0 10px">重置</a-button>
            <a @click="advanced = !advanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
              </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    </a-card>
    <a-card class="card" :bordered="false">
      <a-alert :message="'总条数：' + pagination.total" type="info" show-icon />
    <a-table
      ref="table"
      size="default"
      rowKey="key"
      :columns="columns"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :dataSource="data"
      :pagination="pagination"
      @change="handleTableChange"
    >
    <template slot="action" slot-scope="text,record">
        <a @click="handleAudit(record.id,record.tjzt)" :style="record.tjzt !== '01'?'color:rgba(0, 0, 0, 0.45)':''" >审核</a>
      </template>
      <template slot="ksbh" slot-scope="text,record">
        <a @click="handlePreview(record.ksxxId)">{{text}}</a>
      </template>
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
    </a-table>

      <!-- 审核 -->
      <audit-handle :AuditHandleVisible="AuditHandleVisible" :info='auditData' @quit="handleCloseAudit" @success="handleSubmitAudit" ></audit-handle>
      <!-- 查看 -->
      <examinee :previewVisible="previewVisible" :info="examineeData" @close="handleClosePreview"></examinee>
    </a-card>
</div>
</template>

<script>
// import moment from 'moment'
import AuditHandle from './auditHandle'
import Examinee from '../../examinee/detail'
import { STable } from '~'
import { mapState } from 'vuex'

const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']

export default {
  components: {
    STable,
    AuditHandle,
    Examinee
  },
  data () {
    return {
      advanced: true,
      previewVisible: false,
      AuditHandleVisible: false,
      loading: false,
      data: [],
      // 查询参数
      queryParam: {
        zsnj:'',
        zhxlxxxs:'',
        tjyxdm:'',
        tjzydm:'',
        tjlxm:'',
        ksxm:'',
        ksbh:''
      },
      postParams: {},
      auditData:{
        id:''
      },
      tjzts:[
        {
          id:'01',
          name:'待审核'
        },
         {
          id:'02',
          name:'已调剂'
        },
         {
          id:'03',
          name:'未通过'
        }
      ],
      // 表头
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '招生年度',
          dataIndex: 'zsnj'
        },
        {
          title: '准考证号',
          dataIndex: 'ksbh',
          scopedSlots: { customRender: 'ksbh' }
        },
        {
           title: '姓名',
           dataIndex: 'ksxm'
         },
         {
          title: '科目一',
          dataIndex: 'zzllcj'
        },
        {
          title: '科目二',
          dataIndex: 'wgycj'
        },
        {
          title: '科目三',
          dataIndex: 'ywkycj'
        },
        {
          title: '科目四',
          dataIndex: 'ywkecj'
        },
        {
          title: '总分',
          dataIndex: 'zf'
        },
         {
           title: '调剂院系',
           dataIndex: 'tjyxmc'
         },
         {
           title: '调剂专业',
           dataIndex: 'tjzymc'
         },
         {
           title: '调剂研究方向',
           dataIndex: 'tjyjfxmc'
         },
         {
           title: '调剂类型',
           dataIndex: 'tjlxm'
         },
         {
           title: '调剂状态',
           dataIndex: 'tjztName'
         },
         {
           title: '备注',
           dataIndex: 'note'
         },
        {
          title: '操作',
          dataIndex: 'cz',
          fixed: 'right',
          width: 120,
          scopedSlots: { customRender: 'action' }
        }
      ],
      selectedRowKeys:[],
      selectedRows:[],
      // custom table alert & rowSelection
      options: {
        alert: { show: false },
        rowSelection: {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)

          },
          onSelect: (record, selected, selectedRows) => {
            console.log(record, selected, selectedRows)
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            console.log(selected, selectedRows, changeRows)
          }
        }
      },
      selectMenu: {
        yx: [] ,// 院系
        tjlxlb:[]
      },
      examineeData: {},
      pagination: {
        current: 1,
        showTotal: (() => {return `共 ${this.pagination.total} 条`}),
        showSizeChanger: true,
          pageSizeOptions: ['10', '20', '30','40'],
          // 改变pageSize后触发
          onShowSizeChange: (current, pageSize) => this.pagination.pageSize = pageSize,
      }
    }
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0126: state => state.app['TYPE0126'] // 年级
    })
  },
  created () {
    this.initSelectMenu()
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yx: res[0].data
        }
         this.queryParam.tjyxdm = res[0].data[0].dwh
        this.getProssion(this.queryParam.tjyxdm)
        // 获取调剂类型
        // this.$api.base.dictionaryData('TYPE0398').then( res => {
        //   this.selectMenu.tjlxlb = res.data
        // })
		this.$api.base.getChangeSty().then(res => {
		  this.selectMenu.tjlxlb = res.data
		})
        // 获取当前学年
        this.$api.base.getSchoolYear().then(res=>{
          this.queryParam.zsnj = res.data.masterAdmissionYear
           this.loadData({
            pageSize: 10,
            pageNum: 1
          })
        })
      })
    },
     // 加载数据
    loadData(parameter = {}) {
      if(!parameter.pageNum){
        this.pagination.current = 1
        parameter.pageNum = 1
      }
      let params = Object.assign(this.queryParam, parameter)
      this.loading = true;
      this.$api.recruitstat.reviewOfTransfersList(params).then(res => {
        // console.log(res)
         const pagination = { ...this.pagination
        };
        pagination.total = 0
        if (res.data && res.data.total) {
          pagination.total = res.data.total;
        }
        this.data = []
        this.pagination = pagination;
        if (res.data && res.data.rows.length) {
          this.data = res.data.rows;
          this.data.forEach(item =>{
            if(item.tjzt === '01'){
              item.tjztName = '待审核'
            }else if(item.tjzt === '02'){
              item.tjztName = '已调剂'
            }else {
              item.tjztName = '未通过'
            }
          })
        }
        this.loading = false;
      })
    },
    // 分页
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination
      };
      pager.current = pagination.current;
      this.pagination = pager;
      this.loadData({
        pageSize: pagination.pageSize,
        pageNum: pagination.current
      });
    },
    // 多选
    onSelectChange (selectedRowKeys,selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    // 选择院系
    yxChange (code) {
      this.$set(this.queryParam, 'tjzydm', '')
      this.$set(this.selectMenu, 'zy', [])
      if(code){

      this.getProssion(code)
      }
    },
    getProssion(code) {
      this.$api.base.majorAll({
        lsdwh: code
      }).then(res => {
        this.$set(this.selectMenu, 'zy', res.data)
      })
    },
    // 导出
    handleRxport () {
      console.log('导出')
      this.$export('admissions/kstjxx/kstjxxExport', this.queryParam)
    },
    // 审核
    handleAudit (code,tjzt) {
      if(tjzt !== '01') return
      console.log('审核')
      this.$api.recruitstat.reviewOfTransfersId(code).then( res => {
        res.data.chekType = 'single'
        this.auditData = res.data
        this.AuditHandleVisible = true
      })
    },
    // 批量审核
    handleBatchAudit () {
      console.log('批量审核')
      var deleteId = ''
      let approval=false
      if (!this.selectedRowKeys.length) {
        this.$message.warning('请选择需要审核的数据')
        return
      }
      console.log(this.selectedRows)
      if(this.selectedRows && this.selectedRows.length){
        deleteId = this.selectedRows.map(v => {
          if(v.tjzt !== '01'){
            return approval = true
          }
          return v.id
        }).toString()
      }
      if(approval){
        return this.$message.warning('所勾选的数据无法审核')
      }
      console.log(deleteId)
      var newObj = {
        id:deleteId,
        chekType:'multiply'
      }
      this.auditData = newObj
      console.log(this.auditData)
      this.AuditHandleVisible = true
    },
    // 保存审核
    handleSubmitAudit (d) {
      console.log(d)
      this.AuditHandleVisible = false
      this.loadData({
        pageSize:10,
        pageNum:this.pagination.current
      })
       this.selectedRowKeys = []
    },
    // 取消审核
    handleCloseAudit () {
      this.AuditHandleVisible = false
    },
    // 查看考生详情
    handlePreview (code) {
      this.$api.recruitstat.masterAdmissionManageId(code).then( res=> {
        this.examineeData = res.data
         this.previewVisible = true
      })
    },
    // 关闭考生详情
    handleClosePreview () {
      this.previewVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.card{
  margin-bottom: 20px;
}

</style>
